<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>扭蛋机</title>
    <link rel="stylesheet" href="./vant/vant.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <img class="bg_img" src="./images/bg.png">
        <!--抽奖外盒-->
        <div class="box" ref="box">
            <!--12个小球-->
            <div v-for="(img,index) in imgs" :key="img.id" class="ball" :style="{
             width:size+'px',
             height:size+'px'
         }" ref="ball" :class="['ball'+(index+1),isAround?'weiyi_'+(index+1):'']"><img :src="img.url"></div>
        </div>
        <div :style="{
        width:btnSize+'px',
        height:btnSize+'px'
         }" :class="{'draw':true,'drawnow': isDraw}" @click="luckDraw" ref="draw">
            <img src="./images/twist.png" alt="">
        </div>
        <div class="award" :style="{
            width:awardWidth+'px',
            height:awardHeight+'px'
             }">
            <div v-show="isPrize" :class="['prize',{'isprize':isPrize}]" :style="{
                width:size+'px',
                height:size+'px'
            }"><img :src="'./images/'+randomNum+'.png'" alt="" /></div>
        </div>
        <!--右侧选项-->
        <div class="right">
            <div @click="isrule = true" class="r_list"><img src="./images/guize.png" /></div>
            <div @click="jackpot = true;ismine = 1" class="r_list"><img src="./images/danchi.png" /></div>
            <div @click="jackpot = true;ismine = 2" class="r_list"><img src="./images/danhe.png" /></div>
        </div>
        <!--购买-->
        <div class="buy">
            <div class="num">剩余次数<span style="font-size: .26rem;margin-left: .09rem;">{{frequency}}</span></div>
            <div class="buyNow" @click="buy">立即购买></div>
        </div>
        <!--奖品弹出-->
        <van-popup style="background: transparent;" close-on-click-overlay='false' v-model="prizeShow">
            <div style="width: 100vw; height: 100vh;padding-top: .8rem;box-sizing: border-box;">
                <div class="wupin">
                    <img style="width: 100%;" src="./images/light.png" alt="">
                    <img class="cai center"  src="./images/cai.png" alt="">
                    <img class="wupin_img center" :class="{'teshu':false}" src="./images/wupin.png" alt="">
                    <img  class="wupin_bg center" :class="{'wu':false}" src="./images/wutai.png" alt="">
                </div>
                <div class="whiteText" style="font-size: .17rem;">恭喜获得<span style="color: #FFE785;">人生十二时刻醒狮胸针盲盒一套三枚</span></div>
                <div class="whiteText" style="font-size: .17rem;margin-top: .12rem;">百变随心，萌动可爱</span></div>
                <div  style="width:.92rem;height: .01rem;background-color: #fff;margin: .16rem auto;"></div>
                <div class="whiteText">产品以实物为主</div>
                <div class="whiteText" style="margin-top: .1rem;">请前往首页“我的蛋盒”中领取</div>
                <div class="close_jiang " @click="prizeShow = false"><img src="./images/close.png" alt=""></div>
            </div>
        </van-popup>
        <!--扭蛋池弹出-->
        <van-popup round closeable position="bottom" :style="{ height: '70%' }" close-on-click-overlay='false'
            v-model="jackpot">
            <div class="nav">
                <div class="text " @click="ismine = 1" :class = "{'active':ismine == 1}">本机扭蛋池</div>
                <div style="margin-left: .22rem;" @click="ismine = 2" :class = "{'active':ismine == 2}" class="text">我的蛋盒</div>
            </div>
            <div class="jackpot_content" v-if="ismine == 1">
                <div v-for="item in 10" class="jackpot_l"><img src="./images/banner.png" alt=""></div>   
            </div>
            <div class="jackpot_content" v-else>
                <!-- <div>
                <div v-for="item in 10" class="jackpot_mine_list">
                    <div class="small_img"><img src="./images/banner.png" alt=""></div>
                    <div style="display: flex;flex-direction: column;justify-content: center;">
                        <div style="font-size: .15rem; font-weight: 500;color: #EE2A5E;">小悟空项链</div>
                        <div style="font-size: 11px;font-weight: 400;color: #727171;margin-top: .14rem;">获得时间：2021.5.20
                            13：00</div>
                    </div>
                </div>
               </div> -->
               <div style="width: 100%;margin-top: .8rem; display: flex;justify-content: center;">
                   <img style="width: 1.63rem ;height: 1.82rem;" src="./images/noHave.png" alt="">
               </div>
            </div>
        </van-popup>
        <!--产品详情-->
        <van-popup style="background: transparent;" close-on-click-overlay='false' v-model="isDetails">
            <div class="product_box">
                <div class="product_bg">
                    <div class="product_img"><img src="./images/flower.png" alt=""></div>
                    <div class="product_title">乐高恋爱FAFA</div>
                    <div class="product_dec">乐高正版+手脑并用</div>
                </div>
                <div class="close_details" @click="isDetails = false"><img src="./images/close.png" alt=""></div>
            </div>
        </van-popup>
        <!--活动规则-->
        <van-popup style="background: transparent;" close-on-click-overlay='false' v-model="isrule">
                <div style="display: flex;flex-wrap: wrap;justify-content: center;">
                <div class="rule_box">
                   <img src="./images/rule.png" alt="">
                </div>
                <div class="close_details" @click="isrule = false"><img src="./images/close.png" alt=""></div>
                </div>
        </van-popup>
        <!--购买弹出-->
        <van-popup style="background: transparent;" :close-on-click-overlay='false' v-model="isBuy">
            <div style="position: relative;height: 2.83rem;">
                <button class="buyBtn"><img src="./images/59.9.png" alt=""></button>
                <button class="buyBtn"><img src="./images/99.png" alt=""></button>
                <div class="close_buy" @click="isBuy = false"><img src="./images/close.png" alt=""></div>
            </div>
        </van-popup>
    </div>
    <script src="./js/jquery-2.0.3.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./vant/vant.min.js"></script>
    <script>
        const API = "";
        let app = new Vue({
            el: '#app',
            data: {
                imgs: [{
                        id: 1,
                        url: './images/1.png'
                    },
                    {
                        id: 2,
                        url: './images/2.png'
                    },
                    {
                        id: 3,
                        url: './images/3.png'
                    },
                    {
                        id: 4,
                        url: './images/4.png'
                    },
                    {
                        id: 5,
                        url: './images/5.png'
                    },
                    {
                        id: 6,
                        url: './images/6.png'
                    },
                    {
                        id: 7,
                        url: './images/7.png'
                    },
                    {
                        id: 8,
                        url: './images/8.png'
                    },
                    {
                        id: 9,
                        url: './images/9.png'
                    },
                    {
                        id: 10,
                        url: './images/10.png'
                    },
                    {
                        id: 11,
                        url: './images/11.png'
                    },
                    {
                        id: 12,
                        url: './images/12.png'
                    },
                ],
                screenWidth: '',
                screenHeight: '',
                isDraw: false,
                isAround: false,
                isPrize: false,
                randomNum: '',
                frequency: 0,
                isBuy: false,
                isDetails: false,
                jackpot: false,
                isrule:false,
                prizeShow:false,
                ismine:1 // 1为奖池 2为我的
            },
            computed: {
                size() {
                    return this.screenWidth * 0.16
                },
                btnSize() {
                    return this.screenWidth * 0.1974
                },
                awardWidth() {
                    return this.screenWidth * 0.1947
                },
                awardHeight() {
                    return this.screenHeight * 0.0984
                }

            },
            created() {
                //动态设置小球的大小
                this.screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
                this.screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
                console.log(this.screenWidth);
                console.log(this.screenHeight);
            },
            methods: {
                buy() {
                    this.isBuy = true;
                },
                luckDraw() {
                    var _this = this;
                    this.isDraw = true;
                    this.isAround = true;
                    this.randomNum = Math.floor(Math.random() * 12 + 1);
                    // this.ballMove();
                    //1s后小球停止
                    var ballTime = setTimeout(function () {
                        _this.isAround = false;
                        _this.isPrize = true;
                        setTimeout(function () {
                            _this.prizeShow = true;
                            _this.isDraw = false;
                            _this.isPrize = false;
                        }, 500);
                    }, 1000);
                    // clearTimeout(ballTime);
                },

            }
        })
    </script>

</body>

</html>